import 'package:farmer_app/common/time/time_component.dart';
import 'package:flutter/material.dart';

import '../app_theme.dart';

class RecordCardComponent extends StatelessWidget {
  final AnimationController? animationController;
  final Animation<double>? animation;

  const RecordCardComponent({Key? key, this.animationController, this.animation})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController!,
      builder: (BuildContext context, Widget? child) {
        return FadeTransition(
          opacity: animation!,
          child: new Transform(
            transform: new Matrix4.translationValues(
                0.0, 30 * (1.0 - animation!.value), 0.0),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(
                      left: 24, right: 24, top: 0, bottom: 0),
                  child: Stack(
                    clipBehavior: Clip.none,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 16, bottom: 16),
                        child: Container(
                          decoration: BoxDecoration(
                            color: AppTheme.white,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(8.0),
                                bottomLeft: Radius.circular(8.0),
                                bottomRight: Radius.circular(8.0),
                                topRight: Radius.circular(8.0)),
                            boxShadow: <BoxShadow>[
                              BoxShadow(
                                  color: AppTheme.grey.withOpacity(0.4),
                                  offset: Offset(1.1, 1.1),
                                  blurRadius: 10.0),
                            ],
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Stack(
                                alignment: Alignment.topLeft,
                                children: <Widget>[
                                  ClipRRect(
                                    borderRadius:
                                    BorderRadius.all(Radius.circular(8.0)),
                                    child: SizedBox(
                                      height: 74,
                                      child: AspectRatio(
                                        aspectRatio: 1.714,
                                        child: Image.asset(
                                            "assets/images/back.png"),
                                      ),
                                    ),
                                  ),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Row(
                                        children: <Widget>[
                                          Padding(
                                            padding: const EdgeInsets.only(
                                              left: 100,
                                              right: 16,
                                              top: 16,
                                            ),
                                            child: Text(
                                              "施肥",
                                              textAlign: TextAlign.left,
                                              style: TextStyle(
                                                fontFamily:
                                                AppTheme.fontName,
                                                fontWeight: FontWeight.w500,
                                                fontSize: 18,
                                                letterSpacing: 0.0,
                                                color:
                                                AppTheme.nearlyDarkBlue,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.only(
                                          left: 100,
                                          bottom: 8,
                                          right: 16,
                                        ),
                                        child: Text(
                                          "施氮磷钾肥",
                                          textAlign: TextAlign.left,
                                          style: TextStyle(
                                            fontFamily: AppTheme.fontName,
                                            fontWeight: FontWeight.w500,
                                            fontSize: 16,
                                            letterSpacing: 0.0,
                                            color: AppTheme.grey
                                                .withOpacity(0.5),
                                          ),
                                        ),

                                      ),
                                      Padding(
                                        padding: const EdgeInsets.only(
                                          left: 100,
                                          bottom: 2,
                                          right: 16,
                                        ),
                                        child: TimeComponent(),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                              Container(
                                alignment: Alignment.center,
                                child: Icon(
                                  Icons.check_circle_outline_outlined,
                                  color: Colors.green,
                                  size: 40,
                                ),
                              ),
                              SizedBox(width: 1,)
                            ],
                          )
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
